<template>
  <div>
    <div class="container">
      <div class="searchGroup">
        <span class="inputName">折扣名称：</span>
        <el-input placeholder="请输入折扣名称"
                  v-model="query.keyword"
                  class="inputbox"
                  style="width:auto;margin-right:10px;"></el-input>
        <span class="inputName">折扣类型：</span>
        <el-select v-model="query.discount_type"
                   placeholder="请选择"
                   style="width: auto;display: inline-block;">
          <el-option v-for="item in templateType"
                     :key="item.id"
                     :label="item.title"
                     :value="item.id">
          </el-option>
        </el-select>
        <span class="inputName">所属展会：</span>
        <el-select v-model="query.project"
                   placeholder="请选择"
                   style="width: auto;display: inline-block;">
          <el-option v-for="item in projectArr"
                     :key="item.id"
                     :label="item.title"
                     :value="item.id">
          </el-option>
        </el-select>
        <span class="inputName"></span>
        <el-button type="success"
                   icon="el-icon-search"
                   size="medium"
                   @click="searchTemplate">搜索</el-button>
        <el-button type="warning"
                   icon="el-icon-refresh"
                   size="medium"
                   @click="reset">重置</el-button>
      </div>
      <div>
        <el-button type="primary"
                   icon="el-icon-document-add"
                   size="medium"
                   @click="createBus">新建</el-button>
      </div>
      <div>
        <el-table :data="tableData"
                  style="width: 100%;"
                  border>
          <el-table-column label="序号"
                           align="center">
            <template scope="scope">
              <span>{{scope.$index+(query.page - 1) * pagesize + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="title"
                           label="折扣名称"
                           align="center"></el-table-column>
          <el-table-column prop="z_title"
                           label="折扣类型"
                           align="center"></el-table-column>
          <el-table-column prop="e_title"
                           label="所属展会"
                           align="center"></el-table-column>
          <el-table-column prop="discount_num"
                           label="折扣"
                           align="center"></el-table-column>
          <el-table-column prop="is_show_name"
                           label="是否启用"
                           align="center"></el-table-column>
          <el-table-column prop="create_time"
                           label="创建时间"
                           align="center"></el-table-column>
         <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope"
                    style="flex-direction: row;align-items: center;justify-content: center;">
            <el-button @click="handleClick(scope.row)"
                       type="text"
                       size="small">编辑</el-button>
            <el-button @click="handleDelete(scope.row.id)"
                       type="text"
                       size="small">删除</el-button>
          </template>
                </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination class="list"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-size="pagesize"
                       layout="total, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </div>
    <!-- 新增模板合同 -->
    <!-- 编辑弹出框 -->
    <el-dialog :title="dialogTitle"
               :visible.sync="dialog"
               width="60%">
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title">折扣名称:</div>
          </el-col>
          <el-col :span="9">
            <el-input v-model="modelList.title.value"
                      :placeholder="modelList.title.placeholder"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title">折扣类型:</div>
          </el-col>
          <el-col :span="9">
            <el-select v-model="modelList.discount_type.value"
                       placeholder="请选择"
                       style="width: auto;display: inline-block;">
              <el-option v-for="item in templateType"
                         :key="item.id"
                         :label="item.title"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title">折扣所属展会:</div>
          </el-col>
          <el-col :span="9">
            <el-select v-model="modelList.project.value"
                       placeholder="请选择"
                       style="width: auto;display: inline-block;">
              <el-option v-for="item in projectArr"
                         :key="item.id"
                         :label="item.title"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title">折扣:</div>
          </el-col>
          <el-col :span="9">
            <el-input type="number" v-model="modelList.discount_num.value"
                      :placeholder="modelList.discount_num.placeholder"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title">是否启用:</div>
          </el-col>
          <el-col :span="9">
            <el-switch
                    v-model="modelList.is_show.value"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
            </el-switch>
          </el-col>
        </el-row>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button size="medium" @click="dialog = false">取 消</el-button>
        <el-button size="medium" type="primary"
                   @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/index';
export default {
  name: 'discount',
  data () {
    return {
      projectArr:[],
      templateType:[],
      dialog: false,//新增模板合同弹窗
      dialog1: false,//查看模板合同弹窗
      title: '',//查看模板合同弹框标题
      tmplateName: '',//合同模板名称输入框
      // contractName: '',
      tableData: [],//数据列表
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      total: null,
      docLoadPath: api.API_PATH + api.LOGIN_WORD,
      uploadDocUrl:'',
      DOC_PATH:api.DOC_PATH,
      query: {
        page: 1,
        keyword: "",
        discount_type:'',
        project:''
      },
      modelList: {
        title: { value: '', request: true, name: '折扣', placeholder: '请输入折扣名称', type: 'input' },
        discount_type: { value: '', request: true, name: '折扣类型', placeholder: '请选择折扣类型', type: 'input' },
        project: { value: '', request: true, name: '折扣所属展会', placeholder: '请选择折扣所属展会', type: 'input' },
        discount_num: { value: '', request: true, name: '折扣', placeholder: '请输入折扣', type: 'input' },
        is_show: { value: true, request: false, name: '是否展示', placeholder: '请输入', type: 'input' },
      },
      dialogTitle:'合同模板新增',
      modelType:1,
      itemId:''
    };
  },
  mounted () {
    this.ajax(this.query);
    this.otherAjax()
  },
  methods: {
    //新建
    createBus() {
      this.modelType = 1;
      this.dialog = true;
      this.dialogTitle = '合同模板新增';
      for (let i in this.modelList) {
        this.modelList[i].value = '';
      }
    },
    //查看模板合同
    handleClick(data) {
      this.modelType = 2;
      this.dialog = true;
      this.dialogTitle = '合同模板编辑';
      this.itemId = data.id;
      this.modelList.title.value = data.title;
      this.modelList.discount_type.value = data.discount_type;
      this.modelList.project.value = data.project;
      this.modelList.discount_num.value = data.discount_num;
      this.modelList.is_show.value = data.is_show == 1?true:false;
    },
    //确定按钮
    saveEdit() {
      if (this.modelType === 1) {
        this.addTepmlateAjax()
      } else {
        this.editTepmlateAjax()
      }
    },
    addTepmlateAjax() {
      //验证
      let test = this.testMethod();
      if (!test.flag) {
        this.$message.error(test.msg);
        return false;
      }
      console.log(test);
      const loading = this.$loading({text: '加载中...'});
      this.$http.post(api.CONTRACT_DISCOUNT_ADD, test.data)
              .then((res) => {
                loading.close();
                console.log('管理员列表', res)
                if (res.code == 1) {
                  this.$message.success('保存成功');
                  this.dialog = false;
                  this.query.page=1;
                  this.ajax(this.query);
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              })
    },
    editTepmlateAjax() {
      //验证
      let test = this.testMethod();
      if (!test.flag) {
        this.$message.error(test.msg);
        return false;
      }
      const loading = this.$loading({text: '加载中...'});
      this.$http.post(api.CONTRACT_DISCOUNT_EDIT, test.data)
              .then((res) => {
                loading.close();
                console.log('管理员列表', res)
                if (res.code == 1) {
                  this.$message.success('编辑成功');
                  this.dialog = false;
                  this.ajax(this.query);
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              })
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.modelList.value.value = res.data;
    },
    beforeAvatarUpload(file) {

    },
    //搜索合同模板
    searchTemplate() {
      this.query.page = 1;
      var query = this.query;
      const loading = this.$loading({text: '加载中...'});
      this.$http.post(api.CONTRACTMOBANLIST, query)
              .then((res) => {
                console.log(res)
                loading.close();
                this.tableData = res.data.list
                this.total = res.data.total
              })
    },
    //企业列表接口
    ajax(query) {
      const loading = this.$loading({text: '加载中...'});
      this.$http.post(api.CONTRACT_DISCOUNT_GETLIST, query)
              .then((res) => {
                console.log(res)
                loading.close();
                res.data.list.forEach(item=>item.is_show_name=(item.is_show == 1?'启用':'禁用'));
                this.tableData = res.data.list
                this.total = res.data.total
              });

    },
    otherAjax(){
      //合同模板类型
      this.$http.post(api.CONTRACT_DISCOUNT_LIST)
              .then((res) => {
                console.log(res)
                if (res.code == 1) {
                  this.templateType = res.data;
                } else {
                  this.$message.error(res.msg);
                }
              });
      //项目列表
      this.$http.post(api.CONTRACT_DISCOUNT_PROJECT)
              .then((res) => {
                console.log(res)
                if (res.code == 1) {
                  this.projectArr = res.data;
                } else {
                  this.$message.error(res.msg);
                }
              });
    },
    //重置
    reset() {
      this.query = {
        page: 1,
        keyword: "",
        project:'',
        discount_type:''
      }
      this.ajax(this.query)
    },
    //删除合同模板信息
    handleDelete(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该合同模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(api.CONTRACT_DISCOUNT_DEL, {id: id})
                .then((res) => {
                  if (res.code == 1) {
                    this.ajax(1)
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    })
                  } else {
                    this.$message({
                      type: 'error',
                      message: res.msg
                    })
                  }
                })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    //点击第几页
    handleCurrentChange(currentPage) {
      // console.log(currentPage)
      this.query.page = currentPage;
      this.ajax(this.query)
      // console.log(this.query);
    },
    //验证方法
    testMethod() {
      console.log('1');
      let flag = true, msg = '', data = {};
      for (let i in this.modelList) {
        if (this.modelList[i].request) {
          if (!this.modelList[i].value || this.modelList[i].value == '') {
            flag = false;
            msg = this.modelList[i].placeholder;
            break;
          }
        }
      }
      console.log('2');
      if (flag) {
        data = {
          title: this.modelList.title.value,
          discount_type: this.modelList.discount_type.value,
          project: this.modelList.project.value,
          discount_num: Number(this.modelList.discount_num.value),
          is_show: this.modelList.is_show.value?1:0,
        };
        if (this.modelType == 2) {
          data.id = this.itemId;
        }
      }
      return {flag:flag,data:data,msg:msg}
    }
  }
}
</script>

<style scoped>
/* .inputName {
    font-size: 14px;
    color: #606266;
    margin-right: 10px;
} */
.inputName {
    font-size: 15px;
  padding:0 10px;
}
.inputbox {
    width: 200px;
    margin-right: 20px;
}
.searchGroup {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.list {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 20px;
}
  .list-group{
    padding:10px;
  }
</style>

